<template>
  <div style="padding: 10px;">
    <el-card style="padding: 10px;">
      <el-row>
        关键字：<el-input v-model="params.keyWord" placeholder="请输入请假人名称" style="width: 200px;" size="small"></el-input>
        <el-button type="primary" style="margin:  0 10px;" size="small" v-if="$hasBP('btn.ask.select')"
          @click="getList"> 查询</el-button>
        <el-button type="success" size="small" @click="apply" v-if="$hasBP('btn.ask.apply')">申请</el-button>
      </el-row>

      <el-row style="margin-top: 10px;">
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column prop="stuSno" label="学号" width="120" fixed align="center">
          </el-table-column>
          <el-table-column prop="stuName" label="姓名" width="80" align="center">
          </el-table-column>
          <el-table-column prop="stuPhone" label="学生电话" width="120" align="center">
          </el-table-column>
          <el-table-column prop="stuAddress" label="家庭地址" width="190" align="center">
          </el-table-column>
          <el-table-column prop="stuFamilyName" label="家长名称" align="center">
          </el-table-column>
          <el-table-column prop="stuFamilyPhone" label="家长电话" align="center">
          </el-table-column>
          <el-table-column prop="askStartTime" label="请假时间" align="center" width="170">
            <template slot-scope="scope">{{ scope.row.askStartTime | formatCreateTimes }}至{{scope.row.askStopTime |
              formatCreateTimes}}</template>
          </el-table-column>
          <el-table-column prop="askReason" label="请假原因" align="center">
          </el-table-column>

          <el-table-column prop="askStatus" label="申请状态" align="center">
            <template #default="{row,$index}">
              <span style="color: red;" v-show="row.askStatus==0">
                待审批
              </span>
              <span style="color: rgb(18, 193, 21);" v-show="row.askStatus==1">
                通过
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="askStatus" label="操作" fixed="right" align="center" width="260">
            <template #default="{row,$index}">
              <el-button type="warning" size="small" @click="updateAsk(row)"
                v-if="$hasBP('btn.ask.update')&&row.askStatus==0">修改</el-button>
              <el-button type="danger" size="small" @click="delAsk(row)"
                v-if="$hasBP('btn.ask.del')&&row.askStatus==0">删除</el-button>
              <el-button type="success" size="small" v-if="$hasBP('btn.ask.download')&&row.askStatus==1"
                @click="downloadAsk(row)">下载假条</el-button>
              <el-button type="success" size="small" v-if="$hasBP('btn.ask.examine')" @click="examine(row)"
                :disabled="row.askStatus==1">审批</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-row>



      <el-dialog title="申请/修改假条" :visible.sync="dialogVisible" width="45%">
        <div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="开始时间">
              <!-- <el-input v-model="form.askStartTime"></el-input> -->
              <el-date-picker v-model="form.askStartTime" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <!-- <el-input v-model="form.askStopTime"></el-input> -->
              <el-date-picker v-model="form.askStopTime" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="请假原因">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.askReason">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="affirm()">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import {
    formatDate
  } from '../../../utils/date.js'
  import { mapGetters } from 'vuex'
  export default {
    name: 'WorkspaceJsonIndex',

    data() {
      return {
        params: {
          pageNum: 1,
          pageSize: 10,
          keyWord: ""
        },
        tableData: [],
        dialogVisible: false,
        form: {},
        isUpdateAndSave: 0//0添加

      };
    },
    mounted() {
      this.getList()
    },
    computed: {
      ...mapGetters([
        'type',
        'info'
      ])
    },
    filters: {
      formatCreateTimes(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd  hh:mm:ss')
      }
    },
    methods: {
      getList() {
        if (this.type == 1) {//老师
          this.params.teaId = this.info.id
        } else if (this.type == 2) {//学生
          this.params.stuId = this.info.id
        }

        this.$api.ask.getAskList(this.params).then(res => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data
            this.total = res.pageParams.total
          }
        })
      },
      updateAsk(row) {
        this.dialogVisible = true
        this.form = JSON.parse(JSON.stringify(row))
        this.isUpdateAndSave = 1
      },
      affirm() {
        if (this.isUpdateAndSave == 0) {
          this.form.stuId = this.info.id
          console.log(this.form);
          this.$api.ask.applyAsk(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success("请假成功~")
              this.getList()
              this.dialogVisible = false
            }
          })
        } else if (this.isUpdateAndSave == 1) {
          this.$api.ask.updateAsk(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success("修改成功~")
              this.dialogVisible = false
              this.getList()
            }
          })
        }
      },
      delAsk(row) {
        this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.ask.delAsk(row.id).then(res => {
            if (res.code == 200) {
              this.$message.success("删除成功~")
              this.getList()
            }
          })
        })
      },
      apply() {
        this.form = {}
        this.dialogVisible = true
        this.isUpdateAndSave = 0
      },
      examine(row) {
        console.log(row);
        if (row.askStatus == 1) {
          this.$message.warning("已审批~")
          return
        }
        row.askStatus = 1
        this.$api.ask.examineAsk(row).then(res => {
          if (res.code == 200) {
            this.$message.success("审批成功~")
            this.getList()
          }
        })
      },
      downloadAsk(row) {
        console.log(row);
        if (row.askPdfUrl == "" || row.askPdfUrl == undefined) {
          this.$message.warning("文件不存在请联系管理员~")
          return
        }
        const link = document.createElement("a");
        link.href = row.askPdfUrl;
        link.target = "_blank";
        link.download = "假条.pdf"
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }
    },
  };
</script>

<style lang="scss" scoped>

</style>